// pages/info/perheight.js
var util = require('../../utils/util');
var that;

var deltaX = 0;

var minValue = 80;
// 1.5 总刻度值
var maxValue = 250;
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgurl: '../../images/ic-height.png',
    peric: '../../images/people.png',
    ruler: '../../images/hrule.png',
    heightList:[],
    canvasHeight: 80,
    value: 80
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      // var arr = [];
      // for(var i =80 ;i <=220;i++){
      //   arr.push(i);
      // }
      // this.setData('heightList', arr);
      
      that = this;
      var sex = wx.getStorageSync('selectSex');
      if(sex==1){
        that.setData({ peric:'../../images/nanpeople.jpg'})
      }
    　　// 绘制标尺
    　that.drawRuler();
    　　// 绘制三角形游标
    　that.drawCursor();
  },
  drawRuler: function () {

      /* 1.定义变量 */

      // 1.1 定义原点与终点，x轴方向起点与终点各留半屏空白
      var origion = { x: app.screenWidth / 2, y: that.data.canvasHeight };
      var end = { x: app.screenWidth / 2, y: that.data.canvasHeight };
      // 1.2 定义刻度线高度
      var heightDecimal = 50;
      var heightDigit = 25;
      // 1.3 定义文本标签字体大小
      var fontSize = 20;
      // 1.4 最小刻度值
      // 已经定义在全局，便于bindscroll访问
      
      // 1.6 当前刻度值
      var currentValue = that.data.value;
      // 1.7 每个刻度所占位的px
      var ratio = 10;
      // 1.8 画布宽度
      var canvasWidth = maxValue * ratio + app.screenWidth - minValue * ratio;

      // 设定scroll-view初始偏移
      that.setData({
        canvasWidth: canvasWidth,
        scrollLeft: (currentValue - minValue) * ratio
      });

      /* 2.绘制 */

      // 2.1初始化context
      const context = wx.createCanvasContext('canvas-ruler');
      // 遍历maxValue
      for (var i = 0; i <= maxValue; i++) {
        context.beginPath();
        // 2.2 画刻度线
        context.moveTo(origion.x + (i - minValue) * ratio, origion.y);
        // 画线到刻度高度，10的位数就加高
        context.lineTo(origion.x + (i - minValue) * ratio, origion.y - (i % ratio == 0 ? heightDecimal : heightDigit));
        // 设置属性
        context.setLineWidth(2);
        // 10的位数就加深
        context.setStrokeStyle(i % ratio == 0 ? 'gray' : 'darkgray');
        // 描线
        context.stroke();
        // 2.3 描绘文本标签
        context.setFillStyle('gray');
        if (i % ratio == 0) {
          context.setFontSize(fontSize);
          // 为零补一个空格，让它看起来2位数，页面更整齐
          context.fillText(i == 0 ? ' ' + i : i, origion.x + (i - minValue) * ratio - fontSize / 2, fontSize);
        }
        context.closePath();
      }

      // 2.4 绘制到context
      context.draw();

  　　},

  　　drawCursor: function () {
        /* 定义变量 */
        // 定义三角形顶点 TODO x
        var center = { x: app.screenWidth / 2, y: 5 };
        // 定义三角形边长
        var length = 20;
        // 左端点
        var left = { x: center.x - length / 2, y: center.y + length / 2 * Math.sqrt(3) };
        // 右端点
        var right = { x: center.x + length / 2, y: center.y + length / 2 * Math.sqrt(3) };
        // 初始化context
        const context = wx.createCanvasContext('canvas-cursor');
        context.moveTo(center.x, center.y);
        context.lineTo(left.x, left.y);
        context.lineTo(right.x, right.y);
        // fill()填充而不是stroke()描边，于是省去手动回归原点，context.lineTo(center.x, center.y);
        context.setFillStyle('#48c23d');
        context.fill();
        context.draw();
  　　},
    bindscroll: function (e) {

        // deltaX 水平位置偏移位，每次滑动一次触发一次，所以需要记录从第一次触发滑动起，一共滑动了多少距离
        deltaX += e.detail.deltaX;
        var value = (- deltaX / 10 + minValue).toFixed(1)
        if (value < 0.01) {
          value = 0;
        } else if (value >= maxValue) {
          value = maxValue;
        }

        // 数据绑定
        that.setData({
          value: value
        });
      // console.log(deltaX)

  },
  lastStep:function(){
    var nowQuestion = wx.getStorageSync('nowQuestion');
    if (questionInfo instanceof Array && questionInfo.length > 0) {
      questionInfo.pop();
    } else {
      questionInfo = [];
    }
    wx.setStorageSync('questionInfo', questionInfo);
    util.prevQuestion(nowQuestion.location);
  },
  nextStep:function(){
    var nowQuestion = wx.getStorageSync('nowQuestion');
    nowQuestion.value = that.data.value;
    var questionInfo = wx.getStorageSync('questionInfo') || [];
    if (questionInfo instanceof Array){
      questionInfo.push(nowQuestion);
    }else{
      var arr = [];
      arr.push(questionInfo);
      arr.push(nowQuestion);
      questionInfo = arr;
    }
    wx.setStorageSync('questionInfo', questionInfo);
    util.nextQuestion(nowQuestion.location);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})